<div class="container">
  <div class="mb-5 row">
    <div class="col">
      <h1 class="h3 line-height-1 mb-4 text-center">
        <span class="d-none d-sm-block" i18n>Blog</span>
        <small class="text-muted" i18n
          >Discover the latest Ghostfolio updates and insights on personal
          finance</small
        >
      </h1>
      @if (hasPermissionForSubscription) {
        <mat-card appearance="outlined" class="mb-3">
          <mat-card-content class="p-0">
            <div class="container p-0">
              <div class="flex-nowrap no-gutters row">
                <a
                  class="d-flex overflow-hidden p-3 w-100"
                  href="../en/blog/2025/11/black-weeks-2025"
                >
                  <div class="flex-grow-1 overflow-hidden">
                    <div class="h6 m-0 text-truncate">Black Weeks 2025</div>
                    <div class="d-flex text-muted">2025-11-15</div>
                  </div>
                  <div class="align-items-center d-flex">
                    <ion-icon
                      class="chevron text-muted"
                      name="chevron-forward-outline"
                      size="small"
                    />
                  </div>
                </a>
              </div>
            </div>
          </mat-card-content>
        </mat-card>
      }
      <mat-card appearance="outlined" class="mb-3">
        <mat-card-content class="p-0">
          <div class="container p-0">
            <div class="flex-nowrap no-gutters row">
              <a
                class="d-flex overflow-hidden p-3 w-100"
                href="../en/blog/2025/09/hacktoberfest-2025"
              >
                <div class="flex-grow-1 overflow-hidden">
                  <div class="h6 m-0 text-truncate">Hacktoberfest 2025</div>
                  <div class="d-flex text-muted">2025-09-27</div>
                </div>
                <div class="align-items-center d-flex">
                  <ion-icon
                    class="chevron text-muted"
                    name="chevron-forward-outline"
                    size="small"
                  />
                </div>
              </a>
            </div>
          </div>
        </mat-card-content>
      </mat-card>
      @if (hasPermissionForSubscription) {
        <mat-card appearance="outlined" class="mb-3">
          <mat-card-content class="p-0">
            <div class="container p-0">
              <div class="flex-nowrap no-gutters row">
                <a
                  class="d-flex overflow-hidden p-3 w-100"
                  href="../en/blog/2024/11/black-weeks-2024"
                >
                  <div class="flex-grow-1 overflow-hidden">
                    <div class="h6 m-0 text-truncate">Black Weeks 2024</div>
                    <div class="d-flex text-muted">2024-11-16</div>
                  </div>
                  <div class="align-items-center d-flex">
                    <ion-icon
                      class="chevron text-muted"
                      name="chevron-forward-outline"
                      size="small"
                    />
                  </div>
                </a>
              </div>
            </div>
          </mat-card-content>
        </mat-card>
      }
      <mat-card appearance="outlined" class="mb-3">
        <mat-card-content class="p-0">
          <div class="container p-0">
            <div class="flex-nowrap no-gutters row">
              <a
                class="d-flex overflow-hidden p-3 w-100"
                href="../en/blog/2024/09/hacktoberfest-2024"
              >
                <div class="flex-grow-1 overflow-hidden">
                  <div class="h6 m-0 text-truncate">Hacktoberfest 2024</div>
                  <div class="d-flex text-muted">2024-09-24</div>
                </div>
                <div class="align-items-center d-flex">
                  <ion-icon
                    class="chevron text-muted"
                    name="chevron-forward-outline"
                    size="small"
                  />
                </div>
              </a>
            </div>
          </div>
        </mat-card-content>
      </mat-card>
      @if (hasPermissionForSubscription) {
        <mat-card appearance="outlined" class="mb-3">
          <mat-card-content class="p-0">
            <div class="container p-0">
              <div class="flex-nowrap no-gutters row">
                <a
                  class="d-flex overflow-hidden p-3 w-100"
                  href="../en/blog/2023/11/black-week-2023"
                >
                  <div class="flex-grow-1 overflow-hidden">
                    <div class="h6 m-0 text-truncate">Black Week 2023</div>
                    <div class="d-flex text-muted">2023-11-19</div>
                  </div>
                  <div class="align-items-center d-flex">
                    <ion-icon
                      class="chevron text-muted"
                      name="chevron-forward-outline"
                      size="small"
                    />
                  </div>
                </a>
              </div>
            </div>
          </mat-card-content>
        </mat-card>
      }
      <mat-card appearance="outlined" class="mb-3">
        <mat-card-content class="p-0">
          <div class="container p-0">
            <div class="flex-nowrap no-gutters row">
              <a
                class="d-flex overflow-hidden p-3 w-100"
                href="../en/blog/2023/11/hacktoberfest-2023-debriefing"
              >
                <div class="flex-grow-1 overflow-hidden">
                  <div class="h6 m-0 text-truncate">
                    Hacktoberfest 2023 Debriefing
                  </div>
                  <div class="d-flex text-muted">2023-11-05</div>
                </div>
                <div class="align-items-center d-flex">
                  <ion-icon
                    class="chevron text-muted"
                    name="chevron-forward-outline"
                    size="small"
                  />
                </div>
              </a>
            </div>
          </div>
        </mat-card-content>
      </mat-card>
      <mat-card appearance="outlined" class="mb-3">
        <mat-card-content class="p-0">
          <div class="container p-0">
            <div class="flex-nowrap no-gutters row">
              <a
                class="d-flex overflow-hidden p-3 w-100"
                href="../en/blog/2023/09/hacktoberfest-2023"
              >
                <div class="flex-grow-1 overflow-hidden">
                  <div class="h6 m-0 text-truncate">Hacktoberfest 2023</div>
                  <div class="d-flex text-muted">2023-09-26</div>
                </div>
                <div class="align-items-center d-flex">
                  <ion-icon
                    class="chevron text-muted"
                    name="chevron-forward-outline"
                    size="small"
                  />
                </div>
              </a>
            </div>
          </div>
        </mat-card-content>
      </mat-card>
      <mat-card appearance="outlined" class="mb-3">
        <mat-card-content class="p-0">
          <div class="container p-0">
            <div class="flex-nowrap no-gutters row">
              <a
                class="d-flex overflow-hidden p-3 w-100"
                href="../en/blog/2023/09/ghostfolio-2"
              >
                <div class="flex-grow-1 overflow-hidden">
                  <div class="h6 m-0 text-truncate">
                    Announcing Ghostfolio 2.0
                  </div>
                  <div class="d-flex text-muted">2023-09-09</div>
                </div>
                <div class="align-items-center d-flex">
                  <ion-icon
                    class="chevron text-muted"
                    name="chevron-forward-outline"
                    size="small"
                  />
                </div>
              </a>
            </div>
          </div>
        </mat-card-content>
      </mat-card>
      <mat-card appearance="outlined" class="mb-3">
        <mat-card-content class="p-0">
          <div class="container p-0">
            <div class="flex-nowrap no-gutters row">
              <a
                class="d-flex overflow-hidden p-3 w-100"
                href="../en/blog/2023/08/ghostfolio-joins-oss-friends"
              >
                <div class="flex-grow-1 overflow-hidden">
                  <div class="h6 m-0 text-truncate">
                    Ghostfolio joins OSS Friends
                  </div>
                  <div class="d-flex text-muted">2023-08-23</div>
                </div>
                <div class="align-items-center d-flex">
                  <ion-icon
                    class="chevron text-muted"
                    name="chevron-forward-outline"
                    size="small"
                  />
                </div>
              </a>
            </div>
          </div>
        </mat-card-content>
      </mat-card>
      <mat-card appearance="outlined" class="mb-3">
        <mat-card-content class="p-0">
          <div class="container p-0">
            <div class="flex-nowrap no-gutters row">
              <a
                class="d-flex overflow-hidden p-3 w-100"
                href="../en/blog/2023/07/exploring-the-path-to-fire"
              >
                <div class="flex-grow-1 overflow-hidden">
                  <div class="h6 m-0 text-truncate">
                    Exploring the Path to Financial Independence and Retiring
                    Early (FIRE)
                  </div>
                  <div class="d-flex text-muted">2023-07-01</div>
                </div>
                <div class="align-items-center d-flex">
                  <ion-icon
                    class="chevron text-muted"
                    name="chevron-forward-outline"
                    size="small"
                  />
                </div>
              </a>
            </div>
          </div>
        </mat-card-content>
      </mat-card>
      <mat-card appearance="outlined" class="mb-3">
        <mat-card-content class="p-0">
          <div class="container p-0">
            <div class="flex-nowrap no-gutters row">
              <a
                class="d-flex overflow-hidden p-3 w-100"
                href="../en/blog/2023/05/unlock-your-financial-potential-with-ghostfolio"
              >
                <div class="flex-grow-1 overflow-hidden">
                  <div class="h6 m-0 text-truncate">
                    Unlock your Financial Potential with Ghostfolio
                  </div>
                  <div class="d-flex text-muted">2023-05-20</div>
                </div>
                <div class="align-items-center d-flex">
                  <ion-icon
                    class="chevron text-muted"
                    name="chevron-forward-outline"
                    size="small"
                  />
                </div>
              </a>
            </div>
          </div>
        </mat-card-content>
      </mat-card>
      <mat-card appearance="outlined" class="mb-3">
        <mat-card-content class="p-0">
          <div class="container p-0">
            <div class="flex-nowrap no-gutters row">
              <a
                class="d-flex overflow-hidden p-3 w-100"
                href="../en/blog/2023/03/ghostfolio-reaches-1000-stars-on-github"
              >
                <div class="flex-grow-1 overflow-hidden">
                  <div class="h6 m-0 text-truncate">
                    Ghostfolio reaches 1’000 Stars on GitHub
                  </div>
                  <div class="d-flex text-muted">2023-03-25</div>
                </div>
                <div class="align-items-center d-flex">
                  <ion-icon
                    class="chevron text-muted"
                    name="chevron-forward-outline"
                    size="small"
                  />
                </div>
              </a>
            </div>
          </div>
        </mat-card-content>
      </mat-card>
      <mat-card appearance="outlined" class="mb-3">
        <mat-card-content class="p-0">
          <div class="container p-0">
            <div class="flex-nowrap no-gutters row">
              <a
                class="d-flex overflow-hidden p-3 w-100"
                href="../en/blog/2023/02/ghostfolio-meets-umbrel"
              >
                <div class="flex-grow-1 overflow-hidden">
                  <div class="h6 m-0 text-truncate">
                    Ghostfolio meets Umbrel
                  </div>
                  <div class="d-flex text-muted">2023-02-25</div>
                </div>
                <div class="align-items-center d-flex">
                  <ion-icon
                    class="chevron text-muted"
                    name="chevron-forward-outline"
                    size="small"
                  />
                </div>
              </a>
            </div>
          </div>
        </mat-card-content>
      </mat-card>
      <mat-card appearance="outlined" class="mb-3">
        <mat-card-content class="p-0">
          <div class="container p-0">
            <div class="flex-nowrap no-gutters row">
              <a
                class="d-flex overflow-hidden p-3 w-100"
                href="../de/blog/2023/01/ghostfolio-auf-sackgeld-vorgestellt"
              >
                <div class="flex-grow-1 overflow-hidden">
                  <div class="h6 m-0 text-truncate">
                    Ghostfolio auf Sackgeld.com vorgestellt
                  </div>
                  <div class="d-flex text-muted">2023-01-21</div>
                </div>
                <div class="align-items-center d-flex">
                  <ion-icon
                    class="chevron text-muted"
                    name="chevron-forward-outline"
                    size="small"
                  />
                </div>
              </a>
            </div>
          </div>
        </mat-card-content>
      </mat-card>
      <mat-card appearance="outlined" class="mb-3">
        <mat-card-content class="p-0">
          <div class="container p-0">
            <div class="flex-nowrap no-gutters row">
              <a
                class="d-flex overflow-hidden p-3 w-100"
                href="../en/blog/2022/12/the-importance-of-tracking-your-personal-finances"
              >
                <div class="flex-grow-1 overflow-hidden">
                  <div class="h6 m-0 text-truncate">
                    The importance of tracking your personal finances
                  </div>
                  <div class="d-flex text-muted">2022-12-26</div>
                </div>
                <div class="align-items-center d-flex">
                  <ion-icon
                    class="chevron text-muted"
                    name="chevron-forward-outline"
                    size="small"
                  />
                </div>
              </a>
            </div>
          </div>
        </mat-card-content>
      </mat-card>
      @if (hasPermissionForSubscription) {
        <mat-card appearance="outlined" class="mb-3">
          <mat-card-content class="p-0">
            <div class="container p-0">
              <div class="flex-nowrap no-gutters row">
                <a
                  class="d-flex overflow-hidden p-3 w-100"
                  href="../en/blog/2022/11/black-friday-2022"
                >
                  <div class="flex-grow-1 overflow-hidden">
                    <div class="h6 m-0 text-truncate">Black Friday 2022</div>
                    <div class="d-flex text-muted">2022-11-13</div>
                  </div>
                  <div class="align-items-center d-flex">
                    <ion-icon
                      class="chevron text-muted"
                      name="chevron-forward-outline"
                      size="small"
                    />
                  </div>
                </a>
              </div>
            </div>
          </mat-card-content>
        </mat-card>
      }
      <mat-card appearance="outlined" class="mb-3">
        <mat-card-content class="p-0">
          <div class="container p-0">
            <div class="flex-nowrap no-gutters row">
              <a
                class="d-flex overflow-hidden p-3 w-100"
                href="../en/blog/2022/10/hacktoberfest-2022"
              >
                <div class="flex-grow-1 overflow-hidden">
                  <div class="h6 m-0 text-truncate">Hacktoberfest 2022</div>
                  <div class="d-flex text-muted">2022-10-01</div>
                </div>
                <div class="align-items-center d-flex">
                  <ion-icon
                    class="chevron text-muted"
                    name="chevron-forward-outline"
                    size="small"
                  />
                </div>
              </a>
            </div>
          </div>
        </mat-card-content>
      </mat-card>
      <mat-card appearance="outlined" class="mb-3">
        <mat-card-content class="p-0">
          <div class="container p-0">
            <div class="flex-nowrap no-gutters row">
              <a
                class="d-flex overflow-hidden p-3 w-100"
                href="../en/blog/2022/08/500-stars-on-github"
              >
                <div class="flex-grow-1 overflow-hidden">
                  <div class="h6 m-0 text-truncate">500 Stars on GitHub</div>
                  <div class="d-flex text-muted">2022-08-18</div>
                </div>
                <div class="align-items-center d-flex">
                  <ion-icon
                    class="chevron text-muted"
                    name="chevron-forward-outline"
                    size="small"
                  />
                </div>
              </a>
            </div>
          </div>
        </mat-card-content>
      </mat-card>
      <mat-card appearance="outlined" class="mb-3">
        <mat-card-content class="p-0">
          <div class="container p-0">
            <div class="flex-nowrap no-gutters row">
              <a
                class="d-flex overflow-hidden p-3 w-100"
                href="../en/blog/2022/07/ghostfolio-meets-internet-identity"
              >
                <div class="flex-grow-1 overflow-hidden">
                  <div class="h6 m-0 text-truncate">
                    Ghostfolio meets Internet Identity
                  </div>
                  <div class="d-flex text-muted">2022-07-23</div>
                </div>
                <div class="align-items-center d-flex">
                  <ion-icon
                    class="chevron text-muted"
                    name="chevron-forward-outline"
                    size="small"
                  />
                </div>
              </a>
            </div>
          </div>
        </mat-card-content>
      </mat-card>
      <mat-card appearance="outlined" class="mb-3">
        <mat-card-content class="p-0">
          <div class="container p-0">
            <div class="flex-nowrap no-gutters row">
              <a
                class="d-flex overflow-hidden p-3 w-100"
                href="../en/blog/2022/07/how-do-i-get-my-finances-in-order"
              >
                <div class="flex-grow-1 overflow-hidden">
                  <div class="h6 m-0 text-truncate">
                    How do I get my finances in order?
                  </div>
                  <div class="d-flex text-muted">2022-07-14</div>
                </div>
                <div class="align-items-center d-flex">
                  <ion-icon
                    class="chevron text-muted"
                    name="chevron-forward-outline"
                    size="small"
                  />
                </div>
              </a>
            </div>
          </div>
        </mat-card-content>
      </mat-card>
      <mat-card appearance="outlined" class="mb-3">
        <mat-card-content class="p-0">
          <div class="container p-0">
            <div class="flex-nowrap no-gutters row">
              <a
                class="d-flex overflow-hidden p-3 w-100"
                href="../en/blog/2022/01/ghostfolio-first-months-in-open-source"
              >
                <div class="flex-grow-1 overflow-hidden">
                  <div class="h6 m-0 text-truncate">
                    First months in Open Source
                  </div>
                  <div class="d-flex text-muted">2022-01-05</div>
                </div>
                <div class="align-items-center d-flex">
                  <ion-icon
                    class="chevron text-muted"
                    name="chevron-forward-outline"
                    size="small"
                  />
                </div>
              </a>
            </div>
          </div>
        </mat-card-content>
      </mat-card>
      <mat-card appearance="outlined" class="mb-3">
        <mat-card-content class="p-0">
          <div class="container p-0">
            <div class="flex-nowrap no-gutters row">
              <a
                class="d-flex overflow-hidden p-3 w-100"
                href="../en/blog/2021/07/hello-ghostfolio"
              >
                <div class="flex-grow-1 overflow-hidden">
                  <div class="h6 m-0 text-truncate">Hello Ghostfolio</div>
                  <div class="d-flex text-muted">2021-07-31</div>
                </div>
                <div class="align-items-center d-flex">
                  <ion-icon
                    class="chevron text-muted"
                    name="chevron-forward-outline"
                    size="small"
                  />
                </div>
              </a>
            </div>
          </div>
        </mat-card-content>
      </mat-card>
      <mat-card appearance="outlined" class="mb-3">
        <mat-card-content class="p-0">
          <div class="container p-0">
            <div class="flex-nowrap no-gutters row">
              <a
                class="d-flex overflow-hidden p-3 w-100"
                href="../de/blog/2021/07/hallo-ghostfolio"
              >
                <div class="flex-grow-1 overflow-hidden">
                  <div class="h6 m-0 text-truncate">Hallo Ghostfolio</div>
                  <div class="d-flex text-muted">2021-07-31</div>
                </div>
                <div class="align-items-center d-flex">
                  <ion-icon
                    class="chevron text-muted"
                    name="chevron-forward-outline"
                    size="small"
                  />
                </div>
              </a>
            </div>
          </div>
        </mat-card-content>
      </mat-card>
    </div>
  </div>
</div>
